<template>
  <div class="course-detail-container">
    <NavBar />
    
    <div class="course-content">
      <div class="course-header">
        <div class="course-info">
          <h1 class="course-title">{{ course.title }}</h1>
          <div class="course-meta">
            <span class="course-subject">{{ course.subject }}</span>
            <span class="course-level">{{ getLevelText(course.level) }}</span>
            <span class="course-rating"><el-icon><Star /></el-icon> {{ course.rating }}</span>
            <span class="course-students"><el-icon><User /></el-icon> {{ course.students }}人学习</span>
          </div>
          <p class="course-description">{{ course.description }}</p>
          <div class="course-teacher">
            <span>讲师：</span>
            <el-avatar :size="32" :src="course.teacher.avatar"></el-avatar>
            <span class="teacher-name">{{ course.teacher.name }}</span>
          </div>
        </div>
        <div class="course-action">
          <div class="course-price" :class="{ free: course.price === '免费' }">
            {{ course.price }}
          </div>
          <el-button type="primary" size="large">立即学习</el-button>
          <el-button size="large">加入收藏</el-button>
        </div>
      </div>
      
      <div class="course-body">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="课程章节" name="chapters">
            <p>课程章节内容（待开发）</p>
          </el-tab-pane>
          <el-tab-pane label="课程评价" name="reviews">
            <p>课程评价内容（待开发）</p>
          </el-tab-pane>
          <el-tab-pane label="常见问题" name="faq">
            <p>常见问题内容（待开发）</p>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    
    <FooterBar />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { Star, User } from '@element-plus/icons-vue';
import NavBar from '@/components/home/NavBar.vue';
import FooterBar from '@/components/home/FooterBar.vue';

const route = useRoute();
const store = useStore();
const courseId = computed(() => Number(route.params.id));
const activeTab = ref('chapters');

// 模拟从 store 获取课程数据
const course = computed(() => {
  // 从所有课程和推荐课程中查找
  const allCourses = store.state.home.allCourses;
  const personalizedCourses = store.state.home.personalizedCourses;
  const popularCourses = store.state.home.popularCourses;
  
  // 合并所有课程列表并查找匹配的课程
  const courses = [...allCourses, ...personalizedCourses, ...popularCourses];
  return courses.find(c => c.id === courseId.value) || {
    title: '课程详情',
    subject: '未知学科',
    level: 'beginner',
    rating: 0,
    students: 0,
    description: '课程信息加载中...',
    teacher: {
      name: '未知讲师',
      avatar: ''
    },
    price: '未知'
  };
});

// 获取难度文本
const getLevelText = (level) => {
  const levelMap = {
    'beginner': '初级',
    'intermediate': '中级',
    'advanced': '高级'
  };
  return levelMap[level] || '未知';
};

onMounted(() => {
  // 可以在这里发送请求获取课程详情
  console.log('课程ID:', courseId.value);
});
</script>

<style lang="scss" scoped>
.course-detail-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  
  .course-content {
    flex: 1;
    width: 1200px;
    margin: 20px auto;
    
    .course-header {
      display: flex;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
      padding: 30px;
      margin-bottom: 20px;
      
      .course-info {
        flex: 1;
        
        .course-title {
          margin: 0 0 15px;
          font-size: 24px;
          color: #303133;
        }
        
        .course-meta {
          display: flex;
          margin-bottom: 15px;
          
          span {
            display: flex;
            align-items: center;
            margin-right: 20px;
            color: #606266;
            
            .el-icon {
              margin-right: 5px;
            }
          }
          
          .course-subject {
            background-color: #ecf5ff;
            color: #1e88e5;
            padding: 2px 10px;
            border-radius: 4px;
          }
          
          .course-level {
            background-color: #f0f9eb;
            color: #67c23a;
            padding: 2px 10px;
            border-radius: 4px;
          }
        }
        
        .course-description {
          margin: 0 0 20px;
          color: #606266;
          line-height: 1.6;
        }
        
        .course-teacher {
          display: flex;
          align-items: center;
          
          span {
            margin-right: 10px;
            color: #606266;
          }
          
          .teacher-name {
            font-weight: bold;
          }
        }
      }
      
      .course-action {
        flex: 0 0 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #ebeef5;
        padding-left: 30px;
        
        .course-price {
          font-size: 24px;
          font-weight: bold;
          color: #f56c6c;
          margin-bottom: 20px;
          
          &.free {
            color: #67c23a;
          }
        }
        
        .el-button {
          width: 100%;
          margin-bottom: 10px;
        }
      }
    }
    
    .course-body {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
      padding: 20px;
    }
  }
}
</style> 